<!--导航栏-->
<template>
  <a-menu
    :mode="navLayout"
    :theme="navTheme"
    :selectedKeys="[activeMenu]"
    :open-keys="openKeys"
    @select="onSelect"
    @openChange="openChange">
    <template v-for="item in asyncRoutes">
      <!-- 一级导航 -->
      <a-menu-item :key="item.children[0].name" v-if="hasOneShowingChild(item.children)" @click="handleMenu(item.children[0].name)">
        <icon-font :type="item.children[0].meta.icon" :style="{ color: item.children[0].meta.iconColor }" />
        <span>{{ item.children[0].meta.title }}</span>
      </a-menu-item>
      <!-- 有子级的导航 -->
      <sub-menu v-else :key="item.name" :menu-info="item"></sub-menu>
    </template>
  </a-menu>
</template>

<script>
import { asyncRoutes } from '@/router'
import { mapState } from 'vuex'
import SubMenu from './menu'
export default {
  name: '',
  components: {
    SubMenu
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      asyncRoutes,
      openKeys: [],
      cachedOpenKeys: [],
      selectedKeys: []
    }
  },
  watch: {
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    $route: function () {
      this.updateMenu()
    }
  },
  computed: {
    activeMenu () {
      const route = this.$route
      const { name } = route
      return name
    },
    rootSubmenuKeys: vm => {
      const keys = []
      vm.asyncRoutes.forEach(item => keys.push(item.name))
      console.log(keys)
      return keys
    },
    ...mapState({
      navTheme: state => state.app.theme,
      navLayout: state => state.app.layout
    })
  },
  created () {},
  mounted () {
    this.updateMenu()
  },
  methods: {
    // 判断有无子级
    hasOneShowingChild (val) {
      if (val.length === 1 && val[0].meta.hidden) {
        return true
      }
      return false
    },
    // 导航路由跳转
    handleMenu (name) {
      this.$router.push({ name: name })
    },
    onSelect ({ item, key, selectedKeys }) {
      this.selectedKeys = selectedKeys
      this.$emit('select', { item, key, selectedKeys })
    },
    openChange (openKeys) {
      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
      console.log(latestOpenKey)
      if (latestOpenKey && !this.rootSubmenuKeys.includes(latestOpenKey)) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey || ''] : []
      }
    },
    updateMenu () {
      const routes = this.$route.matched.concat()
      const openKeys = []
      const { hidden } = this.$route.meta
      if (routes.length >= 3 && hidden) {
        routes.pop()
        this.selectedKeys = [routes[routes.length - 1].name]
      } else {
        this.selectedKeys = [routes.pop().name]
      }
      // if (this.$route.meta.hidden) {
      //   openKeys = [routes[1].name]
      // } else {
      //   openKeys = [routes[0].name]
      // }
      routes.forEach(item => {
       item.name && openKeys.push(item.name)
      })
      this.isCollapse ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
    }
  }
}
</script>
<style lang="less" scoped>
.ant-menu.ant-menu-horizontal{
  max-width: calc(100vw - 190px - 238px - 25px);
  flex: 1 1 calc(100vw - 190px - 238px - 25px);
  line-height: 56px;
}
</style>
